<script>
export default {
  props: ['data', 'hasGroup'],
  emits: ['submit'],
  setup(props, ctx) {
    // let btnClick = () => {
    //   console.log(props.data)
    //   // ctx.emit('submit', props.data)
    // }
    // return {
    //   btnClick
    // }
  },
  data() {
    return {
      formUserInfoRules: {
        userEmail: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }],
        userStuId: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { type: 'number', min: 100000000000, max: 999999999999, message: '学号必须是12位数字', trigger: 'blur' }],
        userName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { type: 'string', max: 10, message: '姓名长度不能超过10个字符', trigger: 'blur' }],
      }
    }
  },
  methods: {
    btnClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 验证通过

          this.$emit('submit', this.data)
        } else {
          // 验证失败
          return false;
        }
      });
    }
  }
}
</script>

<template>
  <el-form
    ref="formUserInfo"
    :rules="formUserInfoRules"
    label-position="right"
    label-width="120px"
    :model="data"
  >
    <el-form-item label="邮箱" prop="userEmail">
      <el-input placeholder="请输入邮箱" v-model="data.userEmail"></el-input>
    </el-form-item>
    <el-form-item label="学号" prop="userStuId">
      <el-input placeholder="请输入学号" v-model.number="data.userStuId"></el-input>
    </el-form-item>
    <el-form-item label="姓名" prop="userName">
      <el-input placeholder="请输入姓名" v-model="data.userName"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="data.userGender">
        <el-radio :label="0">未知</el-radio>
        <el-radio :label="1">男</el-radio>
        <el-radio :label="2">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input-number
        size="small"
        v-model="data.userAge"
        controls-position="right"
        :min="0"
        :max="100"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="简介">
      <el-input
        :autosize="{ minRows: 4, maxRows: 8 }"
        maxlength="200"
        show-word-limit
        type="textarea"
        placeholder="请输入简介"
        v-model="data.userBio"
      ></el-input>
    </el-form-item>
    <el-form-item label="用户组">
      <el-select v-if="hasGroup" v-model="data.userGroup" placeholder="选择用户组">
        <el-option label="管理员" :value="0"></el-option>
        <el-option label="普通用户" :value="1"></el-option>
        <!-- <el-option label="禁用" :value="2"></el-option> -->
      </el-select>
    </el-form-item>
    <el-form-item class="t-right">
      <el-button @click="btnClick('formUserInfo')" type="primary">保存修改</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>
</style>
